<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <script src="./assets/js/jquery.js"></script>
</head>
<body>
    <div class="container">
        <h2 style="color:#666">添加新学生</h2>
        <form id="add-form">
            <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" name="sname" class="form-control" placeholder="姓名">
            </div>
            <div class="form-group">
                <label for="name">昵称</label>
                <input type="text" name="snickname" class="form-control" placeholder="昵称">
            </div>
            <div class="form-group">
                <label for="age">年龄</label>
                <input type="text" name="sage" class="form-control" placeholder="年龄">
            </div>
            <div class="form-group">
                <label for="name">性别</label>&emsp;
                <label class="radio-inline">
                    <input type="radio" name="sgender" value="男"> 男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sgender" value="女"> 女
                </label>
            </div>
            <div class="form-group">
                <label for="age">学院</label>
                <input type="text" name="sdept" class="form-control" placeholder="学院号">
            </div>
            <button type="button" class="btn btn-primary">添加</button>
          </form>
    </div>

    <script>
        $(".btn-primary").click(function () {
            var sname = $('[name=sname]').val()
            var snickname = $('[name=snickname]').val()
            var sage = $('[name=sage]').val()
            var sgender = $('[name=sgender]').val()
            var sdept = $('[name=sdept]').val()

            $.post(
                "/school/api/v1.0/student",
                `sname=${sname}&snickname=${snickname}&sage=${sage}&sgender=${sgender}&sdept=${sdept}`,
                function (response) {
                    console.log(response.code);
                    if (response.code == 200) {
                        alert(response.msg)
                        // $('#add-form').reset()
                        document.querySelector('#add-form').reset()
                    } else {
                        alert("添加失败");
                    }
                }
            )
        })
    </script>
</body>
</html>